<!DOCTYPE html>
<html data-ng-app=" ">
<head>
	<meta charset="UTF-8">
	<title>Registration</title>
	<link rel="stylesheet" href="css/bootstrap.css" />	
	<link rel="stylesheet" href="css\MainStyle.css" />
	<link rel="stylesheet" href="css\IndexStyle.css" />
	<script src="js/angular.min.js"></script>
	<script src="js/ValidateRegistration.js"></script>
</head>
<body >

<div class="modal-dialog panel-transparent">
  		<div class="modal-content panel-q-transparent">
	      		<div class="modal-header-reg">
	          		<h1 class="text-center">Registration</h1>
	      		</div>
		      	<div class="modal-body" id="RegDiv" data-ng-init ="checkSessionFromLogin()"   style="width:130%" >
					<form  name="reg" id="RegForm"  novalidate data-ng-submit="ValidateRegistration(reg.$valid)" data-ng-controller="mainForm" >

						<div class="form-group" >
						   <label>User Name</label>
						    <input type="text" class="form-control" name="Username" placeholder="Username" data-ng-model="Username"  data-ng-maxlength=10 required/>
				   		 	<div class="error" data-ng-show="reg.Username.$dirty && reg.Username.$invalid">
							    <small class="error" data-ng-show="reg.Username.$error.required"><font color="red"> Username is Required. </font> </small>
							    <small class="error" data-ng-show="reg.Username.$error.maxlength"><font color="red"> Username cannot be longer than 10 characters.</font></small>
					    	</div>
						</div>
						<div class="form-group">
						  <label for="Password">Password</label>
						  <input type="password" class="form-control" id="Password" name="Password" placeholder="Password" data-ng-model="Password"  data-ng-maxlength=8 required />
						  <div class="error" data-ng-show="reg.Password.$dirty && reg.Password.$invalid">
							    <small class="error" data-ng-show="reg.Password.$error.required"><font color="red"> Password is Required. </font> </small>
							    <small class="error" data-ng-show="reg.Password.$error.maxlength"><font color="red"> Password cannot be longer than 8 characters.</font></small>
					    	</div>
						</div>
						<div class="form-group">
						  	<label >Nickname</label>
						  	<input type="text" class="form-control" id="Nickname" name="Nickname" placeholder="Nickname" data-ng-model="Nickname"  data-ng-maxlength=20 required/>
						  	<div class="error" data-ng-show="reg.Nickname.$dirty && reg.Nickname.$invalid">
							    <small class="error" data-ng-show="reg.Nickname.$error.required"><font color="red"> Nickname is Required. </font> </small>
							    <small class="error" data-ng-show="reg.Nickname.$error.maxlength"><font color="red"> Nickname cannot be longer than 20 characters.</font></small>
					    	</div>
						</div>
						<div class="form-group">
						  <label for="Email">Email Address</label>
						  <input type="email" class="form-control" id="Email" name="Email" placeholder="Email Address"  data-ng-model="Email" required/>
						  <div class="error" data-ng-show="reg.Email.$dirty && reg.Email.$invalid">
						        <small class="error" data-ng-show="reg.Email.$error.email"> <font color="red">That is not a valid email. </font></small>
							    <small class="error" data-ng-show="reg.Email.$error.required"><font color="red"> Nickname is Required. </font> </small>
					    	</div>
				
						</div>
						<div class="form-group">
						  <label for="Photo">Photo URL</label>
						  <input type="text" class="form-control" id="Photo" name="Photo" placeholder="Photo URL" data-ng-model="Photo"/>
						</div>
						<div class="form-group">
						  <label for="Description">Description</label>
						 <textarea class="form-control" rows="3" id="Description" name="Description" placeholder="Description" data-ng-model="Description" data-ng-init="Description"> </textarea>
						 <small class="error" data-ng-show="CountsWord()"> <font color="red">More Then 50 Words </font></small>
						 </div>
						  <!-- To identify from which form it was sent -->
						 <div class="form-group">
						 	<input type="text" class="form-control" name="registrtion" data-ng-model="registrtion" style="display: none;" />
						 	<small data-ng-model="errLabel" style="color:red">{{errLabel}} </small>	
						 </div>
						 
						 <div class="form-group">
							<button  type="submit"  class="btn btn-primary" >Register</button>
						</div>
						<div class="modal-footer">
	            			Already Registered?
	            			<a href="/DGWeb/index.html" class="btn btn-primary">Login</a>
	          			</div>
					</form>
				</div>
		</div>
</div>


</body>
</html>